<template lang="pug">

  .home
    //- group
    cell.user(primary="content" value-align="left") 
      img(slot="icon" width="80" style="display:block;margin-right:5px;" :src="user.avatar")
      div(title="value")
        .nickname {{user.nickname}}
        .userId ID: {{user.uid}}
    group
      cell(title="手机号设置" is-link value-align="left" @click.native="showHideOnBlur = true")
        img(slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/p_phone1.png")
      cell(title="房卡统计记录" is-link value-align="left" link = "/cardRecord")
        img(slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/p_transferCard1.png")
      cell(title="发送房卡" is-link value-align="left" link = "/sendCard")
        img(slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/p_sendCard1.png")
      cell(style="text-align:right " title="俱乐部管理" is-link value-align="left")
        img(slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/p_sendCard1.png")
        inline-x-switch(v-model="groupManage"  @on-change="manageChange")
    x-dialog.phoneSetModal(v-model="showHideOnBlur" class="dialog-demo" hide-on-blur) 
      .title 绑定手机号
      .content
        cell(value-align="left")
          input(title="title" v-model="phone" type="telephone" @input="inputPhoneNo" placeholder="请输入手机号" pattern="")
          button.weui-vcode-btn(:disabled="!correctNo || codeSended " @click="sendCode") 获取验证码
            span(v-show="codeSended") {{recorder}}
        cell(value-align="left")
          input(placeholder="输入验证码" @input="codeEnter" v-model="groupManage")
      .modalFooter
        .bindPhone(:class="inputCode ? '' : 'disabled'" @click="bindPhone") 立即绑定      
</template>

<script>
import { setInterval } from 'timers'
import memberService from '@/api/member'
export default {
  name: 'Home',
  props: ['user'],
  data () {
    return {
      msg: 'Welcome to Your Home App',
      nickname: '上山打老虎',
      userId: '123455',
      showHideOnBlur: false,
      phone: '',
      correctNo: false,
      recorder: 30,
      codeSended: false,
      interval: null,
      inputCode: false,
      code: '',
      groupManage: true
    }
  },
  methods: {
    inputPhoneNo (e) {
      // console.log('inputPhoneNo',this.phone)
      var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
      // console.log('phoneReg.test(this.phone)', phoneReg.test(this.phone))
      if (phoneReg.test(this.phone)) {
        this.correctNo = true
      } else {
      }
    },
    manageChange (e) {
      console.log('manageChange', e)
      var that = this
      if (!e) {
        this.$vux.confirm.show({
          title: '关闭俱乐部管理',
          content: '关闭后再开启功能，需再次消耗100张房卡，是否确定关闭俱乐部管理',
          onConfirm () {
            memberService.ExitGuild()
              .then(res => {
                that.$vux.alert.show({
                  title: '退出公会成功',
                  onHide () {
                    console.log('onHide')
                  }
                })
              })
          }
        })
      }
    },
    sendCode () {
      this.codeSended = true
      this.recorder = 30
      this.interval = setInterval(() => {
        if (this.recorder > 1) {
          this.recorder--
        } else {
          this.codeSended = false
          clearInterval(this.interval)
        }
      }, 1000)
    },
    codeEnter () {
      var codeReg = /^[0-9]{6}$/
      this.inputCode = codeReg.test(this.code)
    },
    bindPhone () {
      if (this.inputCode) {
        this.showHideOnBlur = false
      } else {

      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .home{
    height: 100%;
    position: absolute;
    width: 100%;
    overflow-y: auto;
    top: 0;
    .user{
      background-color: #fff;
    }
    .phoneSetModal{
      padding:10px;
      .title{
        font-size: 20px;
        // font-weight: bold;
      }
      .content{
        padding:10px 0;
        text-align: left;
        .weui-cell{
          padding:10px;
        }
        input{
          height: 40px;
          border-radius: 5px;
          border:1px solid #ccc;
          outline: none;
        }
        button{
          margin-left: 5px;
          height: 40px;
          border-radius: 5px;
          outline:none;
          border:none;
          padding-left:10px;
          padding-right: 10px;
          background-color: #f90;
          color: #fff;
        }
        button[disabled]{
          background-color: #ccc;;
        }
      }
      .modalFooter{
        padding:10px 30px;
      }
      .bindPhone{
        border-radius: 5px;
        color: #fff;
        background-color: lightseagreen;
        padding:10px 0;
        &.disabled{
          background-color: #ccc;
        }
      }
    }
    .weui-cell_access .weui-cell__ft{
      text-align: right;
    }
  }
</style>
